<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>mmkit: Samples &raquo; Units &raquo; Set 2</title>
	<meta name="description" content="mmkit css library units sample page" />
	<meta name="keywords" content="mmkit layouts" />
	<meta name="robots" content="all" />
	<meta http-equiv="imagetoolbar" content="no" />

	<!-- Framework CSS -->
	<link rel="stylesheet" href="../../mmkit/base/screen.css" type="text/css" media="all" />
	<link rel="stylesheet" href="../../mmkit/base/print.css" type="text/css" media="print" />
	<!--[if IE]><link rel="stylesheet" href="../../mmkit/base/ie.css" type="text/css" media="all" /><![endif]-->
	<link rel="stylesheet" href="../../mmkit/forms/screen.css" type="text/css" media="all" />
	<link rel="stylesheet" href="../../mmkit/layouts/3column-contentcenter-leftnav/screen.css" type="text/css" media="all" />
	<link rel="stylesheet" href="../../mmkit/units/set-2/screen.css" type="text/css" media="all" />
	
	<style type="text/css">body { color: #444; } h1,h2,h3,h4,h5,h6 { color: #222; } </style>
</head>
<body class="section-unknown template-unknown page-unknown">
	<div id="container">

		<p id="skip-links"><a href="#primary-content" title="Skip To Content">Skip To Content</a> <a href="#primary-navigation" title="Skip To Primary Navigation">Skip To Primary Navigation</a></p>

		<!-- Site header -->
		<div id="header">
			
			<div id="unit-logo" class="unit">
				<p class="logo"><a href="/" title="Return to Homepage"><span>Sitename</span></a></p>
			</div><!-- /#unit-logo -->

		</div>

		<!-- Main content -->
		<div id="page-content">

			<!-- Main content -->
			<div id="primary-content">

				<div id="unit-production-list">
					<ol>
						<li>
							<a href="#" class="production-image">
								<img src="../assets/placeholder-16-9.png" width="110" height="62" width="100" height="100" />
							</a>
							<h2><a href="#">Production Title</a></h2>
							<p class="production-date">1st April, 6pm - 9pm </p>
							<p class="production-venue">Production Venue </p>					
							<p class="production-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidis adunt ut labore et dolore.</p>	
						</li>
						
						<li>
							<a href="#" class="production-image">
								<img src="../assets/placeholder-16-9.png" width="110" height="62" width="100" height="100" />
							</a>
							<h2><a href="#">Production Title</a></h2>
							<p class="production-date">1st April, 6pm - 9pm </p>
							<p class="production-venue">Production Venue </p>					
							<p class="production-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidis adunt ut labore et dolore.</p>	
						</li>
						
						<li>
							<a href="#" class="production-image">
								<img src="../assets/placeholder-16-9.png" width="110" height="62" width="100" height="100" />
							</a>
							<h2><a href="#">Production Title</a></h2>
							<p class="production-date">1st April, 6pm - 9pm </p>
							<p class="production-venue">Production Venue </p>					
							<p class="production-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidis adunt ut labore et dolore.</p>	
						</li>
						
					</ol>
				</div>
				<!-- #unit-production-list-->
				
				<div id="unit-production" class="unit">

					<h1 class="production-title">
						Production Title
					</h1>

					<img src="../assets/placeholder-16-9.png" alt="Production Image" alt="Production Name" />

					<div id="production-details" class="unit">

						<p class="production-date">
							April 1st 2010 - April 13th 2010
						</p>

						<p class="production-venue">
							The Auditorium
						</p>

						<p class="production-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidis adunt ut labore et dolore.</p>	

					</div>

				</div>
				<!-- #unit-production-->
				
				<div id="unit-performance-list" class="unit">
					
					<h2>Dates &amp; Times</h2>
					
					<table id="sm-production-times" class="date-time-list">
																																	
						<tr class="unbookable-performance noborder alt">

							<td class="date">
								<span>April 1st</span>
							</td>

							<td class="venue">
								Auditorium											
							</td>

							<td class="time">
								7:30pm
							</td>

							<td class="price">
								£13
							</td>

							<td class="buy">

							</td>
						</tr>
						
						<tr class="bookable-performance noborder">

							<td class="date">
								<span>April 2nd</span>
							</td>

							<td class="venue">
								Auditorium											
							</td>

							<td class="time">
								7:30pm
							</td>

							<td class="price">
								£13
							</td>

							<td class="buy">
								<a href="#">Buy</a>
							</td>
						</tr>


					</table>
				</div>
				<!-- #unit-performance-list-->

			</div><!-- /#main-content -->
			
			<div id="tertiary-content">
			
				<div id="unit-related-events" class="unit">
					<h4>Related Events</h4>
					
					<ul>
						<li>
							<img src="../assets/placeholder-16-9.png" width="60" height="60" class="production-image" />
							<a href="#" class="production-title">Production Title</a>
							<p class="related-meta">
								April 1st, Auditorium, 7:30pm
							</p>
						</li>
						<li>
							<img src="../assets/placeholder-16-9.png" width="60" height="60" class="production-image" />
							<a href="#" class="production-title">Production Title</a>
							<p class="related-meta">
								April 1st, Auditorium, 7:30pm
							</p>
						</li>
						<li>
							<img src="../assets/placeholder-16-9.png" width="60" height="60" class="production-image" />
							<a href="#" class="production-title">Production Title</a>
							<p class="related-meta">
								April 1st, Auditorium, 7:30pm
							</p>
						</li>
						<li>
							<img src="../assets/placeholder-16-9.png" width="60" height="60" class="production-image" />
							<a href="#" class="production-title">Production Title</a>
							<p class="related-meta">
								April 1st, Auditorium, 7:30pm
							</p>
						</li>
					</ul>
					
				</div>
				<!-- #unit-related-events-->
				
				<div id="unit-season-event-list" class="unit">
					<h4>This Seasons Events</h4>
					
					<ul>
						<li>
							<img src="../assets/placeholder-16-9.png" width="60" height="60" class="production-image" />
							<a href="#" class="production-title">Production Title</a>
							<p class="related-meta">
								April 1st, Auditorium, 7:30pm
							</p>
						</li>
						<li>
							<img src="../assets/placeholder-16-9.png" width="60" height="60" class="production-image" />
							<a href="#" class="production-title">Production Title</a>
							<p class="related-meta">
								April 1st, Auditorium, 7:30pm
							</p>
						</li>
						<li>
							<img src="../assets/placeholder-16-9.png" width="60" height="60" class="production-image" />
							<a href="#" class="production-title">Production Title</a>
							<p class="related-meta">
								April 1st, Auditorium, 7:30pm
							</p>
						</li>
						<li>
							<img src="../assets/placeholder-16-9.png" width="60" height="60" class="production-image" />
							<a href="#" class="production-title">Production Title</a>
							<p class="related-meta">
								April 1st, Auditorium, 7:30pm
							</p>
						</li>
					</ul>
					
				</div>
				<!-- #unit-season-event-list-->
				
			
			</div>
			<!-- /#tertiary-content -->

		</div><!-- /#page-content -->

		<!-- Footer -->
		<div id="footer">

			<div id="unit-copyright" class="unit">
				&copy; Me 2010
			</div><!-- /#unit-copyright -->
			
			<div id="unit-made-by" class="unit">
				<a href="/">Made by Us</a>
			</div><!-- /#unit-made-by -->
			
			<div id="unit-address" class="unit">
				<address>
					Address Line 1 <br />
					Address Line 2 <br />
					Address Line 3 <br />
					City POSTCODE
				</address>
			</div><!-- /#unit-address -->

			<div id="unit-contact-details" class="unit">
				<p>
					T: 0555 555 5555<br />
					E: mail@example.com<br />
					Registered Number: 123456
				</p>
			</div><!-- /#unit-contact-details -->

			<div id="unit-footer-links" class="unit">
				<ul>
					<li class="first"><a href="">Footer Link</a></li>
					<li><a href="">Footer Link</a></li>
					<li><a href="">Footer Link</a></li>
					<li><a href="">Footer Link</a></li>
					<li class="last"><a href="">Footer Link</a></li>
				</ul>
			</div><!-- /#unit-footer-links -->

		</div>

	</div><!-- /#container -->
</body>
</html>